{% extends "base.html" %}

{% block title %}Listr &raquo; {{ list_title }}{% endblock %}

{% block head_tag_extra_content %}
<link type="text/css" rel="stylesheet" media="all" href="/style/2_column_skeleton.css" />
<script type='text/javascript' src='/lib/js/jquery.js'></script>
<script type='text/javascript' src='/lib/js/jquery-ui.js'></script>
{% endblock head_tag_extra_content %}

{% block body_content %}
<style type="text/css">
.sortable_list_handler_placeholder {
	background: #CEF;
}
</style>
<script type="text/javascript">
	// Namespace
	var listr = {};
	// KeyPress Handling Boolean Enabler
	listr.keypressHandlingEnabled = true;

	// Keypress Event Handling Function
	listr.keypressEventHandling = function(event) {
		if (listr.keypressHandlingEnabled) {
			return; // TODO
		}
	}

	// Mapping the "New List" Button Click to KeyPress
	$(document).keypress( listr.keypressEventHandling );

	// Classic init method for jQuery
	$(document).ready( function() {
		$('#sortable_list-not_done').sortable({
			handle: '.sortable_list_handler',
			axis: 'y',
			placeholder: 'sortable_list_handler_placeholder',
			revert: true,
			opacity: '0.5',
			update: function () {
	        $("input#test-log").val($('#sortable_list-not_done').sortable('serialize'));
	      }
		});
	});
</script>

<!-- div id="left-column" START -->
<div id="left-column">
	<h1 class="h1-left" 
		style="text-align: left; ">{{ list_title }}</h1>
	<div id="description"
		style="color: #8B1; font-size: 90%; ">{{ description }}</div>
	<div id="dates"
		style="text-align: right; font-size: 70%; color: #AD3; ">
		<strong>Created on</strong> {{ creation_date|date:"D d M Y (H:m)" }}
		{% if due_date %}
		-
		<strong>Due</strong>{{ due_date|date:"D d M Y (H:m)" }}
		{% endif %}
		{% if completion_date %}
		-
		<strong>Completed on</strong>{{ completion_date|date:"D d M y (H:m)" }}
		{% endif %}
		<img src="/images/icon_date.png" align="top" />
	</div>
		
	<ul id="sortable_list-not_done" style="list-style: none; ">
		<li style="color: #000; vertical-align: middle;"
			id="not_done-entry_id_1">
			<input type="checkbox" name="not_done-entry_id" value="1"/>
			<img src="/images/icon_grabable.png"
				class="sortable_list_handler"
				style="cursor: move;" />
			Not Done List Entry 1 
		</li>
		<li style="color: #000; vertical-align: middle;"
			id="not_done-entry_id_2">
			<input type="checkbox" name="not_done-entry_id" value="2"/>
			<img src="/images/icon_grabable.png"
				class="sortable_list_handler"
				style="cursor: move;" />
			Not Done List Entry 2 
		</li>
		<li style="color: #000; vertical-align: middle;"
			id="not_done-entry_id_3">
			<input type="checkbox" name="not_done-entry_id" value="3"/>
			<img src="/images/icon_grabable.png"
				class="sortable_list_handler"
				style="cursor: move;" />
			Not Done List Entry 3
		</li>
		<li style="color: #000; vertical-align: middle;"
			id="not_done-entry_id_4">
			<input type="checkbox" name="not_done-entry_id" value="4"/>
			<img src="/images/icon_grabable.png"
				class="sortable_list_handler"
				style="cursor: move;" />
			Not Done List Entry 4
		</li>
		<li style="color: #000; vertical-align: middle;"
			id="not_done-entry_id_5">
			<input type="checkbox" name="not_done-entry_id" value="5"/>
			<img src="/images/icon_grabable.png"
				class="sortable_list_handler"
				style="cursor: move;" />
			Not Done List Entry 5
		</li>
	</ul>
	
	<input type="text" size="70" id="test-log" />
	
	<div style="margin-top: 20px;
		border-bottom: 1px solid #8CF;
		color: #8CF;
		text-align: right; ">Done</div>

	<ul id="sortable_list-done"
		style="list-style: none;">			
		<li style="color: #777; ">
			<form method="post" action="#">
				<input type="button" style="width: 17px;
					height: 17px;
					border: none;
					background: white url(/images/icon_done.png) center no-repeat;" />
				<input type="checkbox" style="display: none;"/> Entry 6
			</form>
		</li>
	</ul>
</div> <!-- div id="left-column" END -->

<!-- div id="right-column" START -->
<div id="right-column">
	<!-- Visibility Block START -->
	<h2 class="bg-icon_private-right">Visibility of this List is
		<span class="{{ visibility }}">{{ visibility }}</span>
	</h2>
	{% ifequal visibility "public" %}
	<div align="center">
		<input type="button" class="flat-input_element bg-icon_private-right" value="Make private" />
		<input type="button" class="flat-input_element bg-icon_shared-right" value="Make shared" />
	</div>
	{% endifequal %}
	
	{% ifequal visibility "private" %}
	<div align="center">
		<input type="button" class="flat-input_element bg-icon_public-right" value="Make public" />
		<input type="button" class="flat-input_element bg-icon_shared-right" value="Make shared" />
	</div>
	{% endifequal %}
	
	{% ifequal visibility "shared" %}
	<div id="sharers-block">
	</div>
	<div align="center">
		<input type="button" class="flat-input_element bg-icon_public-right" value="Make public" />
		<input type="button" class="flat-input_element bg-icon_private-right" value="Make private" />
	</div>
	{% endifequal %}
	<!-- Visibility Block END -->
	
	<!-- Tags Block START -->
	<h2 class="bg-icon_tag-right">Tags</h2>
	<div id="tags-block"
		style="border: 1px solid #CEF;
			padding: 5px;
			margin: 5px;">
	{% for tag in tags %}
		<a href="#" class="tag">{{ tag }}</a>
	{% endfor %}
	</div>
	<form action="#" method="post"
		style="width: 100%;
			text-align: center; ">
		<input type="text" class="flat-input_element" />
		<input type="submit" class="flat-input_element bg-icon_new-right" value="New Tag" />
	</form>
	<!-- Tags Block END -->
</div><!-- div id="right-column" END -->
{% endblock body_content %}